<!-- 护理等级列表页 -->
<template>
  <div class="min-h serveGrade bg-wt">
    <!-- 组件整合，其他组件需要定义在这个div内部 -->
    <!-- 筛选区域 -->
    <SearchFormBox
      :search-data="pagination"
      @handle-clear="handleClear"
      @handle-search="getList"
      @handle-reset="handleReset"
    ></SearchFormBox>
    <!-- 表格 -->
    <TableList
      :listData="listData"
      :pagination="pagination"
      :total="total"
      :hover="hover"
      :data-loading="dataLoading"
      @onPageChange="onPageChange"
      @handle-edit="handleEdit"
      @handle-bulid="handleBulid"
      @handle-click-delete="handleClickDelete"
      @handle-forbidden="handleForbidden"
    ></TableList>
    <!-- 新增，编辑弹窗 -->
    <DialogFrom
      ref="formRef"
      :visible="visible"
      :title="title"
      :data="formBaseData"
      :plan-data="nursPlanData"
      @handle-close="handleClose"
      @handle-add="handleAdd"
      @handle-edit-form="handleEditForm"
    >
    </DialogFrom>
    <!-- 删除弹层 -->
    <Delete
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleClose"
    ></Delete>
    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
// 接口
import {
  levelAdd,
  levelUpdate,
  getLevelList,
  getLevelDetails,
  getnursAllPlanList,
  levelDelete,
  levelStatus
} from '@/api/serve'
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'
// 表格列表
import TableList from './components/TableList.vue'
// 表格列表
import DialogFrom from './components/DialogFrom.vue'
// 搜索框表单
import SearchFormBox from './components/SearchForm.vue'
// ------定义变量------
const total = ref(0) // 总条数
const hover = ref(true) // 鼠标悬停状态
const listData = ref([]) // 列表数据
const dataLoading = ref(false) // 加载中
const visible = ref(false) // 新增，编辑弹窗
const formBaseData = ref({}) // 弹窗表单内容
const title = ref('') // 弹窗标题
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const typeId = ref('') // 设置删除id
const typeStatus = ref(null) // 禁用启用
const operateText = ref('护理等级') // 要操作的内容提示
const statusText = ref('') // 启用禁用提示
const nursPlanData = ref([]) // 护理计划数据
const formRef = ref(null)
// 分页
const pagination = ref<Object | any>({
  pageSize: 5,
  pageNum: 1 // 默认当前页
})

/* 定义方法 */
// 获取列表数据
const getList = async () => {
  const res: any = await getLevelList(pagination.value) // 获取列表数据
  listData.value = res.data.records
  total.value = Number(res.data.total)
}
// 获取护理计划列表
const getPlanList = async () => {
  const res: any = await getnursAllPlanList()
  if (res.code === 200) {
    nursPlanData.value = res.data.filter((val) => val.status === 1)
  }
}
/* 翻页设置当前页 */
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

/* handleClear清空搜索条件 */
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name // 删除name属性
  } else {
    delete pagination.value.status // 删除status属性
  }
  // 重新查询数据
  getList()
}

// handleReset重置搜索条件
const handleReset = () => {
  pagination.value = {
    pageSize: 5,
    pageNum: 1
  }
  // delete pagination.value.name // 删除name属性
  // delete pagination.value.status // 删除status属性
  // 重新查询数据
  getList()
}
// 新增
// handleBulid点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
// handleClose弹窗表单显示隐藏
const handleClose = () => {
  visible.value = false // 关闭新增弹窗
  dialogDeleteVisible.value = false // 关闭删除弹层
}

// handleAdd点击新增按钮 调用接口 新增数据
const handleAdd = async (val) => {
  // 调用新增接口
  const res: any = await levelAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('新增成功')
    getList() // 查询列表
    handleClose() // 关闭弹窗
    formRef.value.handleClear() // 调用子组件的方法，清理数据
  } else {
    MessagePlugin.error('新增失败')
  }
}

// 编辑
// handleEdit 编辑弹窗，回显数据
const handleEdit = (row) => {
  // 将弹出框标题设置为编辑
  title.value = '编辑'
  // 调用接口获取详情数据
  getDetails(row.id)
  // 弹出弹窗
  visible.value = true
}
// 获取详情数据
const getDetails = async (id) => {
  const res: any = await getLevelDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}

// handleEditForm 点击编辑按钮 调用接口 编辑数据
const handleEditForm = async (val) => {
  // 调用编辑接口
  const res: any = await levelUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList() // 刷新列表
    handleClose() // 关闭弹窗
    formRef.value.handleClear() // 调用子组件的方法，清理数据
  } else {
    MessagePlugin.error('编辑失败')
  }
}

// 删除
// handleClickDelete点击删除按钮,弹出删除弹窗
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// handleDelete 点击确定按钮 调用接口 删除数据
const handleDelete = async () => {
  // 调用删除接口
  const res: any = await levelDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList() // 刷新列表
  } else {
    MessagePlugin.error('删除失败')
  }
}

// 禁用
// handleForbidden点击禁用按钮,弹出禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub() // 调用子组件的方法，禁用数据
    statusText.value = '启用成功'
  }
}
// handleForbiddenClose 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
// handleForbiddenSub 点击确定按钮 调用接口 禁用启用数据
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  // 调用禁用启用接口
  const res = await levelStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList() // 刷新列表
  } else {
    MessagePlugin.error('操作失败')
  }
}

// 生命周期
onMounted(() => {
  getList()
  getPlanList()
})
</script>
